<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪元素</title>
    <style>
      li::before {
        content: "子曰：";
        color: cyan;
      }
      li::after {
        content: " --摘自《论语》";
        color: gold;
      }
      a {
        /* 添加下划线 */
        text-decoration: underline;
        /* 添加删除线 */
        text-decoration: line-through;
        /* 去除所有修饰线 */
        text-decoration: none;
      }
      /* 依次选中每个a标签后的相邻弟弟，在它之前生成>  */
      a + a::before {
        content: "> ";
      }
    </style>
  </head>
  <body>
    <ul type="none">
      <li>温故而知新，可以为师矣</li>
      <li>见贤思齐焉，见不贤而内省也</li>
      <li>学而不思则罔，思而不学则殆</li>
    </ul>
    <hr />
    <!-- 面包屑导航 -->
    <!-- 实现效果 首页> 公司业务> 宾馆餐饮> 连锁酒店-->
    <div class="nav">
      <a href="#">首页</a>
      <a href="#">公司业务</a>
      <a href="#">宾馆餐饮</a>
      <a href="#">连锁酒店</a>
    </div>
  </body>
</html>
